<!-- 家政清洁&维修中心 订单模板 -->
<template>
  <div class="order-template">
    <!-- 标题 -->
    <h3 class="order-template__title">{{orderMsg.name}}</h3>
    <!-- 收费标准 + 师傅列表-->
    <div class="order-template__main">
      <!-- 收费标准 -->
      <el-card class="order-template__mtl">
        <h4 class="mtl__title">收费标准</h4>
        <div class="mtl__content">{{orderMsg.standard}}</div>
      </el-card>
      <!-- 师傅列表 -->
      <el-card class="order-template__mtr">
        <h4 class="mtr__title">推荐名单</h4>
        <div class="mtr__scroll">
          <div class="mtr__content" v-for="(item,index) in suggestionList" :key="item.id">
            <img :src="item.img" alt width="100px" height="100px" />
            <div class="mtr__message">
              <h3>{{item.name}}</h3>
              <p>{{item.des}}</p>
              <p>联系方式：{{item.phone}}</p>
              <p>评分：{{item.level}}</p>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <!-- 订单确认 -->
    <div class="order-template__pay">
      <el-card>
        <h4 class="pay__title">订单确认</h4>
        <div class="pay__content">
          <el-form ref="payForm" :model="payForm" label-width="100px" :rules="rules">
            <el-form-item label="项目名称：">{{orderMsg.name}}</el-form-item>
            <el-form-item label="预约师傅：" prop="masterId">
              <el-select v-model="payForm.masterId" placeholder="请选择工作人员">
                <el-option v-for="(item,value) in masterList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="预约日期：" prop="date">
              <el-col :span="12">
                <el-date-picker v-model="payForm.date" type="date" placeholder="选择日期" :picker-options="pickerOptions"></el-date-picker>
              </el-col>
              <el-col class="line" :span="1">-</el-col>
              <el-col :span="11">
                <el-form-item prop="time">
                  <el-select v-model="payForm.time" placeholder="请选择时间">
                    <el-option label="早上（9:00-12:00）" value="morning"></el-option>
                    <el-option label="下午（13:30-15:00）" value="afternoon"></el-option>
                    <el-option label="晚上（19:00-21:00）" value="night"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-form-item>
            <el-form-item label="具体地址：" prop="address">
              <el-input v-model="payForm.address" style="width:455px" placeholder="请填写您的具体地址，例：D1幢129室"></el-input>
            </el-form-item>
            <el-form-item label="联系方式：" prop="phone">
              <el-input v-model="payForm.phone" style="width:455px" placeholder="请填写您的联系方式"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('payForm')">立即下单</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import tools from '../utils';
import { getMaster, submitOrder } from '../api/index';
export default {
  name: '',
  props: [''],
  data() {
    return {
      // 师傅推荐
      suggestionList: [
        {
          id: '1',
          name: '万师傅',
          type: 'dailyClean',
          desc: '人很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错',
          level: '3',
          imgUrl: require('../assets/imgs/dailyClean.png'),
          phone: '123456789',
        },
        {
          id: '2',
          name: '陈师傅',
          type: 'dailyClean',
          desc: '人很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错',
          level: '5',
          imgUrl: require('../assets/imgs/dailyClean.png'),
          phone: '123456789',
        },
        {
          id: '3',
          name: '刘师傅',
          type: 'dailyClean',
          desc: '人很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错',
          level: '5',
          imgUrl: require('../assets/imgs/dailyClean.png'),
          phone: '123456789',
        },
        {
          id: '4',
          name: '蓝师傅',
          type: 'dailyClean',
          desc: '人很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错很不错',
          level: '5',
          imgUrl: require('../assets/imgs/dailyClean.png'),
          phone: '123456789',
        },
      ],
      // 师傅列表
      masterList: [
        {
          id: '1',
          name: '万师傅',
          desc: '11111',
          time: '111',
          level: '3',
        },
        {
          id: '2',
          name: '陈师傅',
          desc: '11111',
          time: '111',
          level: '3',
        },
        {
          id: '3',
          name: '张师傅',
          desc: '11111',
          time: '111',
          level: '3',
        },
      ],
      // 订单
      payForm: {
        name: '',
        date: '',
        time: '',
        masterId: '',
        address: '',
        phone: '',
        orderNumber: '',
        createTime: '',
      },
      // 时间控制
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      // 规则
      rules: {
        masterId: [{ required: true, message: '请选择工作人员', trigger: 'change' }],
        date: [{ required: true, message: '请选择日期', trigger: 'change' }],
        time: [{ required: true, message: '请选择具体时间', trigger: 'change' }],
        address: [{ required: true, message: '请输入具体地址', trigger: 'change' }],
        phone: [{ required: false, validator: tools.validatorPhone, message: '请输入正确的手机号码', trigger: 'blur' }],
      },
      orderMsg: {},
    };
  },
  components: {},
  computed: {},
  created() {
    this.getOrderMsg();
    this.getMasterList();
  },
  methods: {
    onSubmit(formName) {
      this.payForm.orderNumber = tools.uuid();
      this.payForm.name = this.orderMsg.name;
      this.payForm.type = this.orderMsg.type;
      this.payForm.userId = JSON.parse(localStorage.getItem('userInfo')).userId;
      this.payForm.status = 0;
      this.payForm.createTime = new Date();
      this.$refs[formName].validate((valid) => {
        if (valid) {
          submitOrder(this.payForm).then((res) => {
            if (res.code == 200) {
              this.$message.success('下单成功！');
              this.$emit('changeNav', 'orderList');
              this.$router.push('/orderList');
            }
          });
        } else {
          return false;
        }
      });
    },
    // 获取订单信息
    getOrderMsg() {
      let msg = JSON.parse(this.$route.query.q);
      if (msg == null) {
        this.$router.push('/homePage');
      } else {
        this.orderMsg = msg;
      }
      console.log(this.orderMsg);
    },
    // 获取师傅列表
    getMasterList() {
      getMaster(this.orderMsg.type).then((res) => {
        if (res.code === 200) {
          this.suggestionList = res.data;
          this.masterList = res.data;
        }
      });
    },
  },
  watch: {},
};
</script>

<style scoped lang="scss">
.order-template {
  padding: 0 220px;
  .order-template__main {
    display: flex;
    justify-content: space-between;
  }
  .order-template__title {
    font-size: 32px;
    margin-top: 20px;
  }
  .order-template__mtl {
    width: 70%;
    h4 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    .mtl__content {
      font-size: 14px;
      color: #666666;
      line-height: 30px;
    }
  }
  .order-template__mtr {
    width: 28%;
    h4 {
      font-size: 24px;
      margin-bottom: 20px;
    }
    .mtr__scroll {
      max-height: 850px;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .mtr__content {
      height: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      img {
        border-radius: 50%;
      }
      .mtr__message {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: nowrap;
        color: #999999;
        font-size: 12px;
        margin-left: 10px;
        margin-top: 5px;
        p {
          margin-top: 5px;
        }
      }

      &:first-child {
        margin-top: 0;
      }
    }
  }
  .order-template__pay {
    .el-card {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
    .pay__title {
      font-size: 24px;
      margin-bottom: 20px;
    }
    .pay__content {
      float: left;
    }
    .pay__content--intro {
      width: 40%;
      float: right;
    }
  }
}
</style>